/**
 * 入职欢迎信预览
 */
import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';

import { Modal, Spin, message } from 'antd';
import { history } from 'umi'

import { useRequest } from '@/hooks';
// import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import useDictionary from '../../../../hooks/useDictionary';
import { getEntryRemindMailDetail } from '../services';
import styles from './index.less';

const EntryRemindMailPreview = React.forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false);
    const [data, setData] = useState({});

    const { run, loading, mutate } = useRequest(id => getEntryRemindMailDetail(id), {
        manual: true,
        onSuccess: res => {
            const { code, msg } = res;

            if (code === 10000) {
                setData(res.data);
                return;
            }
            // 配置已变更, 当前访问的数据是旧数据, 要返回列表并刷新列表
            if (code === 21008) {
                message.warning(msg);
                history.push({
                    pathname: '/office/personnelManagement/onboardAndLeave/setting/index',
                    state: { tabRoute: true, tabRefresh: true, closeTab: true }
                });
                return;
            }
            message.error(msg);
        }
    });

    const [paramOfEntryWelcomeTplList] = useDictionary('paramOfEntryTipMail');

    // 获取内容, 并替换掉参数占位符为默认内容
    const content = useMemo(() => {
        if (data?.mailContent) {
            let html = data?.mailContent;
            const arr = html.match(/\${[a-zA-Z]+}/g);
            if (arr && arr.length > 0) {
                arr.forEach(item => {
                    const field = item.replace('${', '').replace('}', '');
                    const fieldName =
                        paramOfEntryWelcomeTplList.find(c => c.value === field)?.properties?.default || '';
                    html = html.replace(item, fieldName);
                });
            }
            return html;
        }
        return '';
    }, [data, paramOfEntryWelcomeTplList]);

    useImperativeHandle(ref, () => ({
        open: id => {
            setVisible(true);
            if (typeof id !== 'object') {
                run(id);
            } else {
                setData(id);
            }
        }
    }));

    const handleCancel = useCallback(() => {
        mutate(null);
        setVisible(false);
    }, [mutate]);

    return (
        <Modal width={952} title="预览" visible={visible} onCancel={handleCancel} footer={null}>
            <div className={styles.previewWrap}>
                <div className={styles.previewContainer}>
                    <Spin spinning={loading} style={{ width: '100%' }}>
                        {data?.mailContent && (
                            <div className={styles.emailWarp}>
                                {/* eslint-disable-next-line react/no-danger */}
                                <div dangerouslySetInnerHTML={{ __html: content }} />
                            </div>
                        )}
                    </Spin>
                </div>
            </div>
        </Modal>
    );
});

EntryRemindMailPreview.displayName = 'EntryRemindMailPreview';

export default React.memo(EntryRemindMailPreview);
